<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <canvas id="arc" width="500" height="500" style="border: 2px solid #00f;"></canvas>

  <script>
    const canvas = document.getElementById('arc')
    const ctx = canvas.getContext('2d')

    // 画小球
    ctx.beginPath()
    ctx.arc(100, 100, 20, 0, Math.PI * 2, false)
    ctx.fillStyle = '#f00'
    ctx.fill()

    // 四分之一圆弧---从顶部开始
    ctx.beginPath()
    ctx.arc(350, 450, 100, -Math.PI / 2, 0)
    ctx.stroke()

    // 四分之三圆弧---从底部开始
    ctx.beginPath()
    ctx.arc(350, 450, 50, Math.PI / 2, 0, false)
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(250, 450, 50, Math.PI / 2, 0, true)
    ctx.stroke()

    // 画圆弧 默认顺时针
    ctx.beginPath()
    ctx.arc(100, 100, 50, 0, Math.PI)
    ctx.lineWidth = 2
    ctx.stroke()

    ctx.beginPath()
    ctx.arc(200, 100, 50, 0, Math.PI, true)
    ctx.lineWidth = 2
    ctx.stroke()
  </script>

</body>

</html>